<template>
	<view>

		<view>
			<view style="position: relative;padding: 20rpx;color: rgba(0,0,0,.7);">
				离我最近
				<view 
				class="huanyipi"
				:style="
				'position: absolute;right: 40rpx;bottom: 20rpx;'">换一批<u-icon :style="
					 'transform: rotate('+deg+'deg);'+
					 'color: red;'"
					 name="reload"></u-icon>
				</view>
			</view>

			<view v-for="item in 2" style="
				border-radius: 10rpx;
				width: 700rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				box-shadow: 0 0 10rpx rgba(118,118,118,.2);
				margin-bottom: 20rpx;padding: 20rpx 50rpx 20rpx 50rpx;box-sizing: border-box;">
				<view style="font-size: 35rpx;font-weight: bold;color: rgba(0,0,0,.7)">荣冠蛋糕店（火炬广场店）</view>
					<view style="height: 10rpx;"></view>
				<view style="font-size: 20rpx;"><text style="margin-right: 30rpx;">蛋糕/甜品</text><text>高新开发区</text>
					<text style="position: absolute;right: 20rpx;right: 90rpx;">680m</text>
					<view style="height: 10rpx;"></view>
					<view>
						<image class="goods-img" mode="aspectFill" src="../../static/test_001.png"></image>
						<text style="margin-left: 20rpx;"></text>
						<image class="goods-img" mode="aspectFill" src="../../static/test_001.png"></image>
						<text style="margin-left: 20rpx;"></text>
						<image class="goods-img" mode="aspectFill" src="../../static/test_001.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	var that;
	export default {
		data() {
			return {
				deg: 360
			}
		},
		onShow() {
			that=this;
			that.deg = 90;
			var degInter = setInterval(function() {
				that.deg -= 1;
				if (that.deg <= 0) {
					clearInterval(degInter);
				}
			}, 5);
		},
		methods: {

		}
	}
</script>

<style>
	page {
		color: rgba(118, 118, 118, .9);
	}
	
	.goods-img {
		width: 180rpx;
		height: 180rpx;
	}
	
</style>
